<template>
  <view class="page_bg pb-12 page_min_height">
    <!-- 用户信息 -->
    <view class="px-12 py-20" style="background-image: linear-gradient(to bottom, #f5f6f7, #dfeaff)">
      <view class="flex gap-x-12">
        <button class="reset_btn" open-type="chooseAvatar" @chooseavatar="updateHeadimg">
          <view v-if="userInfo.avatar" class="w-55 h-55 bg-gray-100 rounded-md overflow-hidden">
            <image class="w-55 h-55" :src="userInfo.avatar" mode="aspectFill" />
          </view>
          <view v-else class="w-55 h-55 flex justify-center items-center rounded-md bg-[#4b4f6d]">
            <uni-icons type="person" color="#fff" size="40" />
          </view>
        </button>
        <view v-if="userIdentity.isLogin" class="flex flex-col justify-between pb-4">
          <view v-if="isEdit" class="flex items-center gap-x-10">
            <input
              class="w-150 h-28 text-base border border-solid border-gray-300 rounded p-4"
              type="nickname"
              placeholder="请输入昵称"
              v-model="newNickName"
              auto-focus
            />
            <view class="px-8 py-4 bg-blue-500 text-white text-xs rounded-md" @click="updateNickName">提交</view>
            <view class="px-8 py-4 bg-gray-200 text-gray-500 text-xs rounded-md" @click="closeEdit">取消</view>
          </view>
          <view v-else class="flex items-center gap-x-10">
            <view class="text-xl font-bold">{{ userInfo.name }}</view>
            <uni-icons type="compose" color="" size="22" @click="isEdit = true" />
          </view>
          <view class="text-xs">
            <text class="text-gray-500">用户号：{{ userInfo?.id?.substring(0, 10) }}... </text>
            <text class="ml-10 text-gray-400" @click="copyText(userInfo.id)">复制</text>
          </view>
        </view>
        <navigator
          v-else
          url="/pages/login/index"
          open-type="redirect"
          hover-class="navigator-none"
          class="flex flex-col justify-center text-base font-bold text-[#4b4f6d]"
        >
          立即登录
        </navigator>
      </view>
      <!-- vip -->
      <view
        class="flex justify-between items-center mt-12 p-12 rounded-md"
        style="background-image: linear-gradient(to right, #4b4f6d 0%, #202135 100%)"
        v-if="userIdentity.isLogin"
      >
        <view class="flex items-center">
          <image class="w-28 h-28 rounded-md" src="/static/images/icons/vip.png" mode="aspectFill" />
          <view
            class="ml-6 text-base font-bold"
            :class="userIdentity.isCustomer ? 'text-yellow-400' : 'text-orange-200'"
          >
            {{ userIdentity.isCustomer ? 'VIP用户' : '普通用户' }}
          </view>
        </view>
        <view v-if="userIdentity.isCustomer" class="text-xs text-yellow-400">{{ userInfo.expiration_time }}到期</view>
        <button v-else class="reset_btn" open-type="contact">
          <view class="py-4 px-8 text-amber-800 bg-amber-100 rounded-sm">开通VIP</view>
        </button>
      </view>
    </view>
    <!-- 功能 -->
    <view class="mt-12 px-12">
      <view class="px-12 bg-white rounded-md">
        <view
          class="flex justify-between py-14 items-center border-solid border-b border-[#f0f0f0]"
          @click="toPage('/pages/my/template', 'navigateTo')"
        >
          <view class="flex items-center gap-x-6">
            <uni-icons type="download-filled" color="#447cef" size="22" />
            <view>我的合同模板</view>
          </view>
          <uni-icons type="right" size="16" color="#999" />
        </view>
        <view
          class="flex justify-between py-14 items-center border-solid border-b border-[#f0f0f0]"
          @click="toPage('/pages/service/index', 'switchTab')"
        >
          <view class="flex items-center gap-x-6">
            <uni-icons type="auth-filled" color="#447cef" size="22" />
            <view>我的工单</view>
          </view>
          <uni-icons type="right" size="16" color="#999" />
        </view>
        <view
          class="flex justify-between py-14 items-center border-solid border-b border-[#f0f0f0]"
          @click="toPage('/pages/notice/index', 'switchTab')"
        >
          <view class="flex items-center gap-x-6">
            <uni-icons type="notification-filled" color="#447cef" size="22" />
            <view>我的消息</view>
          </view>
          <uni-icons type="right" size="16" color="#999" />
        </view>
        <button class="reset_btn" open-type="contact">
          <view class="flex justify-between py-14 items-center border-solid border-b border-[#f0f0f0]">
            <view class="flex items-center gap-x-6">
              <uni-icons type="chat-filled" color="#447cef" size="22" />
              <view>在线客服</view>
            </view>
            <uni-icons type="right" size="16" color="#999" />
          </view>
        </button>
        <view class="flex justify-between py-14 items-center">
          <view class="flex items-center gap-x-6">
            <uni-icons type="gear-filled" color="#447cef" size="22" />
            <view>设置</view>
          </view>
          <uni-icons type="right" size="16" color="#999" />
        </view>
      </view>
    </view>
    <view v-if="userIdentity.isLogin" class="mt-12 px-12">
      <view class="px-12 bg-white rounded-md">
        <view class="flex justify-between py-14 items-center border-solid border-b border-[#f0f0f0]" @click="logOut">
          <view class="flex items-center gap-x-6">
            <uni-icons type="upload-filled" color="#447cef" size="22" style="transform: rotate(90deg)" />
            <view>退出登录</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { updateUserInfoApi } from '@/api/user';
import { useUserIdentity } from '@/utils/usePublic';
import { showLoginConfirm, setStorageUserInfo, showToast } from '@/utils/utils';
import { copyText } from '@/utils/index';

const userInfo = ref({});
const userIdentity = useUserIdentity();

onLoad(() => {
  userInfo.value = uni.getStorageSync('userInfo') || {};
});

function toPage(url, type) {
  if (!userIdentity.isLogin) {
    showLoginConfirm();
    return;
  }
  uni[type]({
    url: url,
  });
}

function logOut() {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: res => {
      if (res.confirm) {
        uni.clearStorageSync();
        uni.reLaunch({
          url: '/pages/index/index',
        });
      }
    },
  });
}
// 更新头像
function updateHeadimg(e) {
  const { avatarUrl } = e.detail;
  updateUserInfoApi({ avatar: avatarUrl }).then(res => {
    if (res.code === 200) {
      userInfo.value.avatar = avatarUrl;
      setStorageUserInfo(userInfo.value);
      showToast('更新成功', 'success');
    }
  });
}
// 编辑用户名
const isEdit = ref(false);
const newNickName = ref(userInfo.value.name);
function updateNickName() {
  if (!newNickName.value) {
    showToast('请输入昵称');
    return;
  }
  updateUserInfoApi({ name: newNickName.value }).then(res => {
    if (res.code === 200) {
      userInfo.value.name = newNickName.value;
      setStorageUserInfo(userInfo.value);
      showToast('更新成功', 'success');
      closeEdit();
    }
  });
}
function closeEdit() {
  isEdit.value = false;
  newNickName.value = '';
}
</script>
